<template>
	<view class="RegimentalIndex width100" :class="{'pof':cellShow}" v-if="!loading">
		<cover-view class="index-content background box-sizing pof"
			:style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx`, height: `${getSystemInfo.statusBarHeight}rpx` }"
			v-if="scrollTop*1>10">
			<!-- <view class="" -->
			<!-- > -->
			<cover-view class="font-weight-600 color-f size-32 text-align">领火饭票</cover-view>
			<!-- </view> -->
		</cover-view>
		<view class="gradient"></view>
		<!-- 骨架 -->
		<!-- 		<view  :style="{marginTop: `-${416 - (getSystemInfo.statusBarTop+22)}rpx`}">
			<u-skeleton :loading="true" avatar rows="1"></u-skeleton>
		</view> -->
		<!-- 头像部分 -->
		<view class="avatar-section color-f" :style="{marginTop: `-${416 - (getSystemInfo.statusBarTop+22)}rpx`}"
			@click="basicShow=true">
			<u-skeleton :loading="loading" avatarShape="square" :title="false" avatarSize="84rpx" avatar rows="2"
				:rowsWidth="['120rpx','136rpx']" :rowsHeight="['26rpx','22rpx']" v-if="loading"></u-skeleton>
			<view class="avatar-hovg" v-if="!loading">
				<image class="width-height100" src="@/static/img/title.png" mode=""
					v-if="!infoData.userAuthRespVo.imagePhoto"></image>
				<image class="width-height100" :src="infoData.userAuthRespVo.imagePhoto" mode="aspectFill" v-else>
				</image>
			</view>
			<view class="height100" v-if="!loading">
				<view class="margin-bottom-12 dis-ali">
					<text class="font-weight-600 size-30 margin-right5">{{infoData.userAuthRespVo.realName}}</text>
					<text class="iconfont icon-right-1-copy size-26 color-f "></text>
				</view>
				<view class="font-weight-400 size-24">{{infoData.userAuthRespVo.telephone}}</view>
			</view>
		</view>
		<!-- 温馨提示 -->
		<image @click="onJumpPage('addStation')" class="reminder margin-bottom-24" :src="`${OnlineStatic}wxts.png`"
			mode="" v-if="!indexInfo.siteCount*1">
		</image>
		<!-- 金刚栏部分 -->
		<view class="diamond text-align radius20 f-background margin-bottom-24">
			<view class="diamond-width" @click="onJumpPage('product')">
				<view class="icons margin-bottom-12">
					<image class="width-height100" src="@/static/img/spgl.png" mode=""></image>
				</view>
				<view class="diamond-title color3 size-24">商品管理</view>
			</view>
			<view class="diamond-width" @click="onJumpPage('station')">
				<view class="icons margin-bottom-12">
					<image class="width-height100" src="@/static/img/yzgl.png" mode=""></image>
				</view>
				<view class="diamond-title color3 size-24">驿站管理</view>
			</view>
			<view class="diamond-width" @click="onJumpPage('groupCode')">
				<view class="icons margin-bottom-12">
					<image class="width-height100" src="@/static/img/qmgl.png" mode=""></image>
				</view>
				<view class="diamond-title color3 size-24">群码管理</view>
			</view>
			<view class="diamond-width" @click="cellShow=true">
				<view class="icons margin-bottom-12">
					<image class="width-height100" src="@/static/img/xqxx.png" mode=""></image>
				</view>
				<view class="diamond-title color3 size-24">小区信息</view>
			</view>
		</view>
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postTeamLeaderOrderPage($event.num)" :toTop="{width: '100px',height: '100px'}"
			:down="{use: false}" :up="{auto: true, textNoMore: '-已经到底啦-',empty:{use:false}}">
			<!-- 可用便利豆 -->
			<view class="available-beans f-background radius20 margin-bottom-24" @click="onJumpPage('beanManag')">
				<view class="font-weight-400 color6 size-26 margin-bottom-16">可用便利豆</view>
				<view class="available dis-cen">
					<view class="beans dis-ali">
						<image class="beans-img" src="@/static/icon/bld.png" mode=""></image>
						<text class="font-weight-600 color3 size-52 margin-left-12">
							{{infoData.teamLeaderWalletRespVo.walletAmount || 0}}
						</text>
					</view>
					<view class="recharge font-weight-400 color-f size-24 dis">立即充值</view>
				</view>
			</view>
			<!-- 数据统计 -->
			<view class="statistics f-background radius20">
				<view class="statistics-data dis-cen">
					<text class="titles font-weight-600 color3 size-28">本周柱状统计</text>
					<view class="dates dis-ali" @click="onJumpPage('selectDate')">
						<text class="font-weight-400 size-24 color3">{{params.startTime}}</text>
						<text class="font-weight-400 iconfont icon-zuojiang"></text>
						<text class="font-weight-400 size-24 color3">{{params.endTime}}</text>
						<text class="font-weight-400 iconfont icon-riqi"></text>
					</view>
				</view>
				<Statistics :list="indexInfo.list" />
				<view class="overview radius20">
					<view class="color3" v-for="(item,index) in overview" :key="index">
						<view class="dis-ali font-weight-400 size-22 margin-bottom-12">
							<view class="drop" :style="{background: item.color}"></view>{{item.name}}
						</view>
						<view class="font-weight-600 size-36">{{item.num || 0}}</view>
					</view>
				</view>
			</view>
			<!-- 商品部分 -->
			<u-sticky :offset-top="getSystemInfo.statusBarHeight">
				<u-tabs lineWidth="50rpx" :activeStyle="activeRegimental" :inactiveStyle="inactiveRegimental"
					:list="tabsList" @click="onClick"></u-tabs>
			</u-sticky>
			<view class="product-section" v-if="!loading && list.length">
				<view class="section f-background radius20" @click="onJumpPage('substitute','id',item.orderId)"
					v-for="(item,index) in list" :key="index">
					<view class="product dis-cen">
						<view class="font-weight-400 color9 size-24 dis-ali">
							<text class="iconfont icon-shizhong"></text>下单时间：{{item.createTime || '-'}}
						</view>
						<text class="size-28" :style="{color: listProxy[item.orderStatus].color}">
							{{listProxy[item.orderStatus].name}}
						</text>
					</view>
					<view class="goods border-bottom" v-for="(res,inx) in item.teamLeaderOrderDetailRespVo" :key="inx">
						<view class="goods-img">
							<u--image width="140rpx" height="140rpx" :src="res.goodsUrl || '123'">
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u--image>
						</view>
						<view class="between">
							<view class="dis-cen">
								<text class="font-weight-600 color3 size-32">{{res.goodsName || '-'}}</text>
								<text class="font-weight-400 color3 size-28">x{{res.goodsCount || 0}}</text>
							</view>
							<view class="font-weight-400 color9 size-24">{{res.goodsType == 1 ? '团长推荐' : '粮油调味'}}</view>
							<view class="font-weight-600 color size-40">
								<text class="size-28">¥</text> {{res.payableAmount || 0}}
							</view>
						</view>
					</view>
					<view class="amount text-align-right color9 size-24">
						共{{item.orderDetailCount || 0}}件 合计:
						<text class="color font-weight-600 size-28">
							￥<text class="color size-40">{{item.payableAmount || 0}}</text>
						</text>
					</view>
				</view>
			</view>
			<view class="default" v-else>
				<Default tisName="暂无商品信息数据!" />
			</view>
		</mescroll-body>
		<view class="inset-bottom"></view>
		<!-- 		<u-popup :show="filteringShow" round="32rpx" @close="filteringShow=false">
		<view class="select-date" v-if="filteringShow">
			<cover-view class="select-backs" @click="filteringShow=false"></cover-view>
			<view class="backs f-background">
			</view>
				<SelectDate @dateRange="onDateRange" />
		</view> -->
		<!-- </u-popup> -->
		<!-- 小区信息 -->
		<cover-view class="community-infos dis pof" v-show="cellShow">
			<cover-view class="community-popup pof" @click="cellShow=false"></cover-view>
			<cover-view class="PopUpPrompt por f-background">
				<cover-view class="title dis-cen border-bottom">
					<cover-view class="font-weight-400 color3 size-32">小区信息</cover-view>
					<cover-view class="iconfont icon-guanbi color3 size-48" @click="cellShow = false"></cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali">
					<cover-view class="names font-weight-400 color9">小区名称</cover-view>
					<cover-view class="font-weight-600 color3">{{indexInfo.community.communityName || ''}}</cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali">
					<cover-view class="names font-weight-400 color9">详细地址</cover-view>
					<cover-view class="font-weight-600 color3">
						{{indexInfo.community.communityAddress || ''}}
					</cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali" @click="onJumpPage('station')">
					<cover-view class="names font-weight-400 color9">小区驿站</cover-view>
					<cover-view class="font-weight-600 color3 dis-ali">
						{{indexInfo.siteCount*1}}个驿站
						<cover-view class="size-28 color font-weight-400 margin-left-12">查看驿站</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali">
					<cover-view class="names font-weight-400 color9">小区跑腿员</cover-view>
					<cover-view class="font-weight-600 color3">{{indexInfo.deliveryCount || 0}}个跑腿员</cover-view>
				</cover-view>
				<cover-view class="knows background dis" @click="cellShow=false">
					<cover-view class="color-f font-weight-600 size-32">我知道了</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<!-- 基本信息 -->
		<cover-view class="community-infos dis pof" v-show="basicShow">
			<cover-view class="community-popup pof" @click="basicShow=false"></cover-view>
			<cover-view class="PopUpPrompt por f-background">
				<cover-view class="picture radius100">
					<cover-image class="width-height100" mode="aspectFill" :src="infoData.userAuthRespVo.imagePhoto"
						@click="onPreviewImage(infoData.userAuthRespVo.imagePhoto)"></cover-image>
				</cover-view>
				<cover-view class="iconfont icon-guanbi guanbi color3 size-48" @click="basicShow = false"></cover-view>
				<cover-view class="size-30 dis-ali">
					<cover-view class="names font-weight-400 color9">基本信息</cover-view>
					<cover-view class="font-weight-600 color3">{{infoData.userAuthRespVo.realName || ''}}
						{{infoData.userAuthRespVo.sex*1 ? '女士' : '先生'}}</cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali">
					<cover-view class="names font-weight-400 color9">联系方式</cover-view>
					<cover-view class="font-weight-600 color3">
						{{infoData.userAuthRespVo.telephone || ''}}
					</cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali" @click="onJumpPage('station')">
					<cover-view class="names font-weight-400 color9">服务小区</cover-view>
					<cover-view
						class="font-weight-600 color3 dis-ali">{{indexInfo.community.communityName || ''}}</cover-view>
				</cover-view>
				<cover-view class="size-30 dis-ali">
					<cover-view class="names font-weight-400 color9">入驻时间</cover-view>
					<cover-view class="font-weight-600 color3">{{infoData.userAuthRespVo.createTime || ''}}</cover-view>
				</cover-view>
				<cover-view class="log-login knows dis" @click="onLogOutAndlogIn">
					<cover-view class="color0 font-weight-600 size-32">退出登录</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	const url = {
		product: '/packageColonel/product/product', // 商品管理
		station: '/packageColonel/station/station', // 驿站管理
		groupCode: '/packageColonel/group-code/group-code', // 群码管理
		beanManag: '/packageColonel/bean-manag/bean-manag', // 我的便利豆
		addStation: '/packageColonel/station/add-station', // 新增驿站
		substitute: '/packageOrder/details/substitute', // 订单详细
		station: '/packageColonel/station/station', // 驿站列表
		selectDate: '/packageColonel/select-date/select-date', // 选择日期
	}
	import Default from "@/components/default/default"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getSystemInfo, datesFuture } from '@/utils/index';
	import { activeRegimental, inactiveRegimental } from '@/utils/style/tabs';
	import { listProxy, urlData } from "@/utils/enumeration/index"
	// import uCharts from '@qiun/ucharts';
	import Statistics from "@/components/statistics/statistics"
	import SelectDate from "@/components/select-date/select-date"
	import { TeamLeaderIndex, TeamLeaderOrderPage, GetUserIdTeamLeader, OnlineStatic, TeamLeaderUser } from "@/api/index"
	// var uChartsInstance = {};
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Statistics, SelectDate, Default },
		data() {
			return {
				urlData,
				basicShow: false,
				listProxy,
				OnlineStatic,
				cellShow: false, // 小区信息
				loading: true,
				scrollTop: 0,
				activeRegimental,
				inactiveRegimental,
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				filteringShow: false,
				overview: [
					{ color: '#EB0000', name: '商品总收益(元)', type: 'totalGoodsAmount' },
					{ color: '#FDE670', name: '订单总数量(单)', type: 'orderCount' },
					{ color: '#94D2FF', name: '小区总流量(人)', type: 'countPreson' }
				],
				tabsList: [{ name: '未完成', type: 2 }, { name: '已完成', type: 1 }],
				indexInfo: {},
				params: {
					startTime: datesFuture(-7), // 开始日期
					endTime: datesFuture(0), // 结束日期
				},
				goodParams: {
					size: 20,
					current: 1,
					dataBean: {
						type: 2
					}
				},
				list: [],
				infoData: {}
			};
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		onReady() {

		},
		onShow() {
			// const bgAudioManager = uni.getBackgroundAudioManager();
			// bgAudioManager.title = '致爱丽丝';
			// bgAudioManager.singer = '暂无';
			// bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
			// bgAudioManager.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
			if (uni.getStorageSync('userInfo')) {
				console.log('12341654687', uni.getStorageSync('userInfo'))
				uni.reLaunch({
					url: urlData[uni.getStorageSync('userInfo').roleId]
				});
				return
			}
			this.postTeamLeaderUser()
			this.postTeamLeaderIndex()
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
			this.canReset && this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			this.canReset = true // 过滤第一次的onShow事件
		},
		onLoad() {},
		methods: {
			// 我的
			async postTeamLeaderUser() {
				const { code, data } = await TeamLeaderUser()
				if (code == "200") {
					this.infoData = data
					this.loading = false
					// uni.reLaunch({
					// 	url: 'test?id=1'
					// });
				}
			},
			// 首页信息
			async postTeamLeaderIndex() {
				const { code, data } = await TeamLeaderIndex(this.params)
				if (code == '200') {
					this.indexInfo = data
					this.overview.map(res => {
						res.num = data.goodsTimeStatistics[res.type]
					})
				}
			},
			async postTeamLeaderOrderPage() {
				this.params.current = this.mescroll.num
				const { code, data } = await TeamLeaderOrderPage(this.goodParams)
				if (code == '200') {
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data
						.records); //追加新数据
					setTimeout(() => {
						this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			onClick(e) {
				this.goodParams.dataBean.type = e.type
				this.mescroll.resetUpScroll() // 重置列表数据为第一页
				// this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
				console.log(e.type)
			},
			// 查看大图
			onPreviewImage(list, index) {
				if (!list) return
				uni.previewImage({
					current: index * 1,
					urls: [list]
				});
			},
			datesFuture,
			// 选择的日期
			onDateRange(e) {
				this.params = e
				this.filteringShow = false
				this.postTeamLeaderIndex()
			},
			onJumpPage(name, parName, par) {
				let urlData = url[name]
				if (parName) {
					urlData = `${urlData}?${parName}=${par}` // 有参数
					if (name == 'substitute') urlData = `${urlData}&type=1` // 有参数
				}
				uni.navigateTo({
					url: urlData
				});
			},
			// 退出登录
			onLogOutAndlogIn() {
				uni.showModal({
					title: '温馨提示',
					content: '确认退出登录吗？',
					confirmColor: "#EB0000",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.reLaunch({
								url: '/packagePerson/logon/logon'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	::v-deep.RegimentalIndex {
		padding: 24rpx;
		box-sizing: border-box;

		.select-date,
		.select-backs {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10000;
		}

		.select-backs {
			background: rgba(0, 0, 0, 0.5);
		}

		.select-date {
			.backs {
				position: fixed;
				left: 0;
				bottom: 0;
				z-index: 10001;
				width: 100%;
				border-radius: 24rpx 24rpx 0 0;
			}
		}

		.index-content {
			width: 100%;
			left: 0;
			top: 0;
			z-index: 1000;
		}

		.gradient {
			width: 750rpx;
			height: 416rpx;
			margin-top: -24rpx;
			margin-left: -24rpx;
			background: linear-gradient(180deg, #EB0000 40%, #EB0000 65%, rgba(255, 255, 255, 0) 100%);
		}

		// 温馨提示
		.reminder {
			width: 100%;
			height: 130rpx;
		}

		// 头像部分
		.avatar-section {
			// margin-top: -340rpx;
			margin-bottom: 40rpx;
			display: flex;
			align-content: space-between;
			align-items: center;

			.avatar-hovg {
				width: 80rpx;
				height: 84rpx;
				margin-right: 20rpx;
				border-radius: 23rpx;
				overflow: hidden;
			}
		}

		// 金刚栏部分
		.diamond {
			display: flex;
			justify-content: space-between;
			// margin-top: 40rpx;
			padding: 26rpx;

			.diamond-width {
				.icons {
					width: 70rpx;
					height: 70rpx;
					margin: 0 auto 12rpx;
				}
			}
		}

		// 可用便利豆
		.available-beans {
			padding: 24rpx 28rpx 28rpx 32rpx;

			.beans-img {
				width: 46rpx;
				height: 40rpx;
			}

			.recharge {
				width: 156rpx;
				height: 62rpx;
				background: linear-gradient(180deg, #F7822B 0%, #EB0000 100%);
				border-radius: 100rpx;
			}
		}

		// 数据统计
		.statistics {
			padding: 24rpx;

			.statistics-data {
				margin-bottom: 25rpx;

				.dates {
					padding: 0 14rpx;
					height: 52rpx;
					border-radius: 6rpx;
					border: 1px solid #EDEDED;

					text {
						padding: 0 10rpx;
					}

					.icon-zuojiang {
						transform: rotate(-90deg) scaleX(-1);
						display: block;
					}

					.font-weight-400 {
						color: #D9D9D9;
					}
				}
			}

			.overview {
				padding: 52rpx 20rpx 36rpx 20rpx;
				display: flex;
				justify-content: space-between;
				background: #F1F2F6;
				margin-top: 24rpx;

				.drop {
					width: 24rpx;
					height: 24rpx;
					border-radius: 6rpx;
					margin-right: 12rpx;
				}

				.font-weight-600 {
					margin-left: 36rpx;
				}
			}
		}

		// 导航
		.u-tabs {
			background: #f6f6f6;
		}

		.u-tabs__wrapper__nav__item {
			width: 50%;
			padding: 0 !important;
		}

		.u-tabs__wrapper__nav__item {
			height: 116rpx !important;
		}

		.u-tabs__wrapper__nav__line {
			height: 8rpx !important;
			border-radius: 100rpx !important;
			background: #EB0000 !important;
			bottom: 20rpx !important;
		}

		// 商品部分
		.product-section {
			.section {
				margin-bottom: 20rpx;
				padding: 32rpx 24rpx 28rpx;

				.product {
					.icon-shizhong {
						margin-right: 6rpx;
					}
				}

				.goods {
					padding: 38rpx 24rpx 38rpx 0;
					display: grid;
					grid-template-columns: 140rpx 1fr;
					grid-gap: 24rpx;

					.goods-img {
						width: 140rpx;
						height: 140rpx;
						overflow: hidden;
						border-radius: 10rpx;
						background: #F8F8F8;
					}
				}

				.amount {
					margin-top: 28rpx;
				}
			}
		}

		// 小区信息
		.community-infos,
		.community-popup {
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
		}

		.community-popup {
			background: rgba(0, 0, 0, 0.5);
		}

		.PopUpPrompt {
			z-index: 1000;
			border-radius: 28rpx;
			position: relative;

			.guanbi {
				top: 30rpx;
				right: 30rpx;
				position: absolute;
			}

			.picture {
				width: 160rpx;
				height: 160rpx;
				border: 5px solid #ffffff;
				margin: 40rpx auto 20rpx;
			}

			.size-30 {
				margin-top: 40rpx;
			}

			.knows {
				width: 602rpx;
				height: 90rpx;
				border-radius: 12rpx;
				margin-top: 50rpx;
			}

			.log-login {
				background: rgba(153, 153, 153, .2);
				margin-top: 100rpx;
			}
		}
	}
</style>